<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../fontawesome/css/all.min.css">

  <script src="../js/upload.js" charset="utf-8"></script> 

  <title>视频上传</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      background-image: linear-gradient(to top, #cfd9df 50%, #e2ebf0 100%);
      border-radius:10px;
      overflow: hidden;
    }

    #mainContainer{
      width: 380px;
      height: 480px;
      border: 1px solid rgb(63, 144, 176); /* 边框宽度、样式和颜色 */
      border-radius:20px;
      
    }

    label {
      display: block;
      font-weight: bold; /* 字体加粗 */
      margin-left: 25px;

      margin-bottom: 8px;
    }

    input, textarea, select {
      width: 350px;
      padding: 8px;
      margin-left: 25px;
      margin-bottom: 16px;
      box-sizing: border-box;
    }

    #video{
      background-color: #70b0f4;
      border-radius: 20px;
      font-weight: bold; /* 字体加粗 */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影 */
      cursor: pointer; /* 设置鼠标指针为手型 */
      transition: transform 0.2s; /* 添加浮动效果的过渡时间 */
      font-size: 20px;
    }
    #video:hover{
      
      background-color: #4b9bf1;
    }
    #video:active{
      background-color: #70b0f4;
      transform: translateY(-5px); /* 当鼠标悬停时向上浮动5像素 */
    }

    .file-input {
      display: none; /* 隐藏原生文件输入 */
    }

  
    .file-label {
      cursor: pointer;
      display: inline-block;
      color: white;
      padding: 5px 20px 5px 20px;
      border: none;
      
      margin-left: 30px;
      margin-right: 40px;
      cursor: pointer;

      background-color: #70b0f4;
      border-radius: 20px;
      font-weight: bold; /* 字体加粗 */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影 */
      cursor: pointer; /* 设置鼠标指针为手型 */
      transition: transform 0.2s; /* 添加浮动效果的过渡时间 */
      font-size: 20px;
    }


    .file-label:hover {
      background-color: #4b9bf1;
    }

    .file-input:active{
      background-color: #70b0f4;
      transform: translateY(-5px); /* 当鼠标悬停时向上浮动5像素 */
    }

    button {
      display: block;
      background-color: #093a6ec0;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }

    button:hover {
      background-color: #0056b3;
    }
    
    #Close {
    /* 添加按钮的样式 */
    background-color: #c0d7e3; /* 设置背景颜色为蓝色 */
    margin-left: 315px;
    margin-top: 5px;
    color: rgb(7, 0, 0); /* 设置文字颜色为白色 */
    border: none; /* 移除按钮的边框 */
    font-size: 20px;
    border-radius: 50px;
    cursor: pointer; /* 设置鼠标指针为手型 */
    transition: transform 0.3s; /* 添加浮动效果的过渡时间 */
    }

    #Close:hover {
        background-color: #ff5c2f; /* 设置背景颜色为蓝色 */

    }
    #Close:active {
        transform: translateY(-5px); /* 当鼠标悬停时向上浮动5像素 */
    }





    #summarizeButton{
      background-color: #70b0f4;
      border-radius: 20px;
      font-weight: bold; /* 字体加粗 */
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 添加阴影 */
      cursor: pointer; /* 设置鼠标指针为手型 */
      transition: transform 0.2s; /* 添加浮动效果的过渡时间 */
      font-size: 20px;
    }
    #summarizeButton:hover{
      
      background-color: #4b9bf1;
    }
    #summarizeButton:active{
      background-color: #70b0f4;
      transform: translateY(-5px); /* 当鼠标悬停时向上浮动5像素 */
    }

   
  
  </style>
</head>
<body>

  <div id = "mainContainer">

<button class="close_icon_button " id = "Close"><i class="fas fa-times"></i></button>


<form id="feedbackForm">
  <label for="name">视频名称:</label>
  <input type="text" id="name" name="name" required>

  <label for="tag">视频标签(可选):</label>
  <input type="text" id="tag" name="tag" required>

  <label for="tag"></label>
  <input type="text" id="rtest" name="rtest" required style="display: none;">

  <input type="file" id="video" name="video" accept="video/*" class="file-input">
  <label for="video" class="file-label"><i class="fa fa-plus-circle"></i> 选择视频</label>
  <button id="summarizeButton" class="fa fa-send-o"> 一键生成</button>

  <div id="videoContainer"></div>

  <div id="videoContainersrc" style="margin-left: 20px;"></div>

  

  
</form>

</div>
</body>
</html>
